<template>
  <aside :style="{ '--translate-x': isClose ? '0%' : '-120%' }">
    <div class="sublabel">
      <span>全景变电系统资源接入统计</span>
    </div>
    <div class="bbox">
      <div v-for="item in list" :key="item.type" class="bbox-item">
        <img class="icon" :src="item.ubg" />
        <div class="text">
          <div class="text-label">{{ item.name }}</div>
          <div class="text-value">{{ initData[item.field] }}</div>
        </div>
      </div>
    </div>

    <div class="sublabel">设备缺陷 TOP5</div>
    <div v-if="initData.defectTop5List?.length !== 0">
      <div v-for="(item, index) in initData.defectTop5List" :key="index">
        <div class="progress">
          <div class="progress-word">
            <div class="bg-no" :data-no="index + 1"></div>
            {{ item.defectName }}
          </div>
          <div class="progress-nums">{{ item.defectNum }}</div>
        </div>
        <a-progress
          :percent="item.defectNum / 10"
          :show-info="false"
          strokeColor="#00796a"
        />
      </div>
    </div>
    <empty v-else></empty>

    <img class="close up" @click="changeHide" src="@/assets/svgs/up1.svg" />
  </aside>

  <img
    class="close down"
    v-if="!isClose"
    @click="changeHide"
    src="@/assets/svgs/up1.svg"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { statistic } from './serve.api'

const isClose = ref(true)
const initData = ref({})
const list = ref([
  {
    ubg: new URL('../../assets/images/home/icon-01.png', import.meta.url).href,
    name: '接入摄像机',
    color: '',
    nums: '12',
    unit: '',
    url: '',
    type: '',
    field: 'cameraNum'
  },
  {
    ubg: new URL('../../assets/images/home/icon-02.png', import.meta.url).href,
    name: '无人机点位数量',
    color: '',
    nums: '24',
    unit: '',
    url: '',
    type: '',
    field: 'uavPointNum'
  },
  {
    ubg: new URL('../../assets/images/home/icon-03.png', import.meta.url).href,
    name: '分割设备类型数量',
    color: '',
    nums: '10',
    unit: '',
    url: '',
    type: '',
    field: 'seqDeviceTypeNum'
  },
  {
    ubg: new URL('../../assets/images/home/icon-04.png', import.meta.url).href,
    name: '大模型算法数量',
    color: '',
    nums: '2',
    unit: '',
    url: '',
    type: '',
    field: 'algNum'
  }
])

function changeHide() {
  isClose.value = !isClose.value
}

onMounted(async () => {
  try {
    initData.value = await statistic()
  } catch (error) {
    console.log(error)
  }
})
</script>

<style lang="less" scoped>
aside {
  position: absolute;
  top: 3.715rem;
  left: 0.625rem;
  z-index: 1;
  padding: 1rem 1.5rem;
  width: 24.75rem;
  background-color: rgb(255 255 255 / 35%);
  border: 0.0625rem solid rgb(255 255 255 / 50%);
  border-radius: 0.5rem;
  transition: all 0.5s ease;
  backdrop-filter: blur(0.25rem);
  box-sizing: content-box;
  transform: translateX(var(--translate-x));

  .sublabel {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: #1d2129;
    font-weight: 700;
  }

  .bbox {
    display: grid;
    padding: 1rem 0 2rem;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.75rem 1rem;
    border-bottom: 0.0625rem solid #e5e6eb;
    margin-bottom: 1rem;

    &-item {
      display: flex;

      .icon {
        margin-right: 1rem;
        width: 3rem;
      }

      .text {
        &-label {
          font-size: 0.875rem;
          color: #1d2129;
        }

        &-value {
          font-size: 1.25rem;
          color: #1d2129;
          font-weight: 700;
        }
      }
    }
  }

  .progress {
    display: flex;
    justify-content: space-between;
    line-height: 1rem;
    margin-top: 1rem;

    &-word {
      position: relative;
      display: flex;
      align-items: center;

      .bg-no {
        margin-right: 0.375rem;
        width: 1.0625rem;
        height: 100%;
        color: #00796a;
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('@/assets/images/home/bg-no.png');

        &::before {
          content: attr(data-no);
          padding-left: 0.5rem;
          font-size: 0.875rem;
          font-weight: 700;
        }
      }
    }

    &-nums {
      font-size: 1rem;
      color: #1d2129;
      font-weight: 700;
    }
  }
}

.close {
  width: 1rem;
  cursor: pointer;
}

.up {
  position: absolute;
  top: 12.5rem;
  right: 0.5rem;
  // transform: rotateY(180deg) translateY(-50%);
  transform: rotateY(180deg);
}

.down {
  position: fixed;
  top: 19rem;
  left: 0.5rem;
  z-index: 2024;
  height: 2.75rem;
  background-color: #fff;
}
</style>
